<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书修改</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js"></script>
</head>
<body>
  <h2>修改图书</h2>

  <div id="form"></div>
  
  <button id="btn">提交</button>

  <script id="form-content" type="text/html">
    <input type="hidden" name="_id" value="<%=book._id%>" id="_id">
    书名: <input type="text" name="name" value="<%=book.name%>" id="name"><br/>
    作者: <input type="text" name="author" value="<%=book.author%>" id="author"><br/>
    价格: <input type="number" name="price" value="<%=book.price%>" id="price"><br/>
  </script>

  <script>
    /* 
    读取query参数指定参数名的值
    */
    function getQueryValue(name){
      var str=location.href.split('?');
      var query=str[1];
      var vars=query.split('&');
      for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
          if(pair[0] == name){
              return pair[1];
          }
      }
      return(false);
    }

    /* 
    根据参数请求获取图书信息显示
    */
    async function getBook() {
      // 得到id参数
      const id = getQueryValue('id')
      // 发ajax请求
      const response = await axios(`http://localhost:8080/book/${id}`)
      const book = response.data.data;
      // 渲染模板
      const html = template('form-content', {book})
      // 插入到div中
      document.getElementById('form').innerHTML = html
    }

    getBook()

    document.getElementById('btn').onclick = async () => {
      // 收集数据
      const _id = document.getElementById('_id').value
      const name = document.getElementById('name').value
      const author = document.getElementById('author').value
      const price = document.getElementById('price').value
      // 提交修改图书的ajax请求
      // await axios({
      //   url: 'http://localhost:8080/book',
      //   method: 'PUT',
      //   data: {_id, name, author, price}
      // })

      await axios.put('http://localhost:8080/book',{_id, name, author, price})
      // 成功后, 跳转到books页面
      window.location = './books.html'
    }
    
  </script>
</body>
</html>